<template>
    <div>
        <common-banner name="新闻中心" en-name="News Center"></common-banner>
        <div class="page-center">
            <el-breadcrumb separator-class="el-icon-arrow-right" class="mt-20 mb-20">
                <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                <el-breadcrumb-item :to="{ path: '/news' }">新闻中心</el-breadcrumb-item>
                <el-breadcrumb-item>{{ newsItem.title }}</el-breadcrumb-item>
            </el-breadcrumb>

            <h1 class="news-title">{{ newsItem.title }}</h1>
            <div class="news-subtitle">
                <span class="pr-20">来源:{{ newsItem.source }}</span>
                <span class="pr-20">作者:{{ newsItem.author }}</span>
                <span class="pr-20">发布时间: {{ newsItem.date }}</span>
                <span>{{ newsItem.uv }}次浏览</span>
            </div>

            <div class="line mt-20 mb-40"></div>

            <div class="news-content mb-60" v-html="newsItem.content"></div>

            <div class="other-news">
                <a
                    :href="
                        newsPreItem && newsPreItem.articleId
                            ? `/news-detail?id=${newsPreItem.articleId}`
                            : 'javascript:void(0)'
                    "
                    >上一篇: {{ (newsPreItem && newsPreItem.title) || '无' }}</a
                >
            </div>
            <div class="other-news mb-40">
                <a
                    :href="
                        newsNextItem && newsNextItem.articleId
                            ? `/news-detail?id=${newsNextItem.articleId}`
                            : 'javascript:void(0)'
                    "
                    >下一篇: {{ (newsNextItem && newsNextItem.title) || '无' }}</a
                >
            </div>
        </div>
    </div>
</template>
<script setup>
import { ref } from 'vue'
import CommonBanner from '@/components/CommonBanner.vue'
// TODO 从接口中获取
const newsItem = ref({
    title: '6月SINCO最新入库杂质对照品，现货等您来选！',
    date: '2024-06-05',
    articleId: 3,
    source: '',
    author: 'PHYS',
    uv: 568,
    content:
        '今日，“第二十二届世界制药原料中国展”暨“第十七届世界制药机械、包装设备与材料中国展”（CPHI & PMEC China 2024）<h2>在上海新国际博览中心正式启幕！<h2>',
})

const newsPreItem = ref(null)
const newsNextItem = ref({
    title: '6月SINCO最新入库杂质对照品，现货等您来选！',
    date: '2024-06-05',
    articleId: 3,
    source: '',
    author: 'PHYS',
    uv: 568,
    content:
        '今日，“第二十二届世界制药原料中国展”暨“第十七届世界制药机械、包装设备与材料中国展”（CPHI & PMEC China 2024）<h2>在上海新国际博览中心正式启幕！<h2>',
})
</script>
<style lang="scss" scoped>
.news-title {
    text-align: center;
    font-size: 22px;
    color: #666;
}

.news-subtitle {
    margin: 10px 0;
    text-align: center;
    color: #5a5a5a;
    font-size: 12px;
}

.line {
    color: #868686;
    height: 20px;
    background: #f5f5f5;
    border: 1px solid #e5e5e5;
}

.other-news {
    a {
        color: #595959;
        font-size: 12px;
    }
}
</style>
